<template>
    <div>
        <div class="goods-footer">
            <div class="goods-article">
                <div class="goods-tabs">
                    <nav>
                        <a href="javascript:;" @click="detail()">商品详情</a>
                        <a href="javascript:;" @click="pj()">商品评价</a>
                    </nav>
                    <div class="goods-detail" v-if="details&&goodsList.details">
                        <div class="attrs" >
                            <li  v-for="A in goodsList.details.properties">
                                <dt>{{A.name}}</dt>
                                <dd>{{A.value}}</dd>
                            </li>
                        </div> 
                        <img  v-for="A in goodsList.details.pictures" :src="A" alt="">
                    </div>
                    <div class="goods-comment" v-if="sppj">
                        <div class="head">
                            <div class="data">
                                <p>
                                    <span>{{evaluateList.salesCount}}</span>
                                    <span>人购买</span>
                                </p>
                                <p>
                                    <span>{{evaluateList.praisePercent}}</span>
                                    <span>好评率</span>
                                </p>
                            </div>
                            <div class="tags">
                                <div class="dt">大家都在说：</div>
                                <div class="dd">
                                    <a href="javascript:;">全部评价({{evaluateList.evaluateCount}})</a>
                                    <a href="javascript:;" v-for="A,index in evaluateList.tags" :class="{active:index==isActive}" @click="abc(index)">{{A.title}}({{A.tagCount}})</a>
                                </div>
                            </div>
                        </div>
                        <div class="sort">
                            <span>排序：</span>
                            <a href="javascript:;">默认</a>
                            <a href="javascript:;">最新</a>
                            <a href="javascript:;">最热</a>
                        </div>
                        <div class="list" >
                            <div class="item"  v-for="B in pageList">
                                <div class="user">
                                    <img :src="B.member.avatar" alt="">
                                    <span>{{B.member.nickname}}</span>
                                </div>
                                <div class="body">
                                    <div class="score">
                                        <i></i>
                                        <i></i>
                                        <i></i>
                                        <i></i>
                                        <i></i>
                                        <span class="attr">
                                            <span v-for="C in B.orderInfo.specs">
                                                <span>{{C.name}}</span> : 
                                                <span>{{C.nameValue}}</span>
                                            </span>
                                        </span>
                                    </div>
                                    <div class="text">
                                        {{B.content}}
                                    </div>
                                    <!-- <div class="goods-comment-image" v-if="B.pictures">
                                        <div class="list">
                                            <a href="javascript:;" v-for="C in B.pictures">
                                                <img :src="C" alt="">
                                            </a>
                                        </div>
                                    </div> -->
                                    <div class="time">
                                        <span>{{B.createTime}}</span>
                                        <span>{{B.praiseCount}}</span>
                                    </div>
                                </div>
                            </div>
                            <el-pagination
                            background
                            @size-change="SizeChange"
                            layout="prev, pager, next"
                            :total="1000">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goods-aside">
                <div class="goods-hot">
                    <h3>24小时热销榜</h3>
                    <div>
                        <a class="goods-item" href="javascript:;" v-for="A in GoodsHotList">
                            <img :src="A.picture" alt="">
                            <p>{{A.name}}</p>
                            <p>{{A.desc}}</p>
                            <p>{{A.price}}</p>
                        </a>
                    </div>
                </div>
                <div class="goods-hot">
                    <h3>周热销榜</h3>
                    <div>
                        <a class="goods-item" href="javascript:;" v-for="A in GoodsHotLists">
                            <img :src="A.picture" alt="">
                            <p>{{A.name}}</p>
                            <p>{{A.desc}}</p>
                            <p>{{A.price}}</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueProject01Goodsfooter',
    props:['goodsList'],
    data() {
        return {
            details:true,
            sppj:false,
            evaluateList:[],
            expression:1,
            page:1,
            pageSize:10,
            pageList:[],
            GoodsHotList:[],
            GoodsHotLists:[],
            isActive:1
        };
    },

    mounted() {
        this.axios.get(`https://mock.boxuegu.com/mock/1175/goods/${this.$route.query.id}/evaluate/page?page=${this.page}&pageSize=${this.pageSize}`).then(res=>{
            if(res.data){
                    this.pageList=res.data.result.items
                }
        })
        this.axios.get(`https://apipc-xiaotuxian-front.itheima.net/goods/hot?id=${this.$route.query.id}&limit=3&type=1`).then(res=>{
            if(res.data){
                this.GoodsHotList=res.data.result
                
            }
        })
        this.axios.get(`https://apipc-xiaotuxian-front.itheima.net/goods/hot?id=${this.$route.query.id}&limit=3&type=2`).then(res=>{
            if(res.data){
                this.GoodsHotLists=res.data.result
            }
        })
        
    },

    methods: {
        abc(index){
            this.isActive=index
            // console.log(this.isActive,index);
        },
        SizeChange(){
            this.pageSize=10
        },
        detail(){
            this.details=true
            this.sppj=false
        },
        pj(){
            this.details=false
            this.sppj=true
            this.axios.get(`https://mock.boxuegu.com/mock/1175/goods/${this.$route.query.id}/evaluate`).then(res=>{
                if(res.data){
                    this.evaluateList=res.data.result
                }
            })
        }
    },
};
</script>

<style scoped lang='scss'>
.active{
    border-color: #27ba9b !important;
    background: #27ba9b !important;
    color: #fff !important;
}
.goods-footer{
    width: 1240px;
    margin: 20px auto;
    background: #fff;
    min-height: 460px;
    display: flex;
}
.goods-article{
    width: 940px;
    margin-right: 20px;
}
.goods-aside{
    width: 280px;
    min-height: 1000px;
    .goods-hot{
        h3{
            height: 70px;
            background: #e26237;
            color: #fff;
            font-size: 18px;
            line-height: 70px;
            padding-left: 25px;
            margin-bottom: 10px;
            font-weight: 400;
        }
        .goods-item{
            background: #fff;
            width: 100%;
            margin-bottom: 10px;
            display: block;
            width: 280px;
            padding: 20px 30px;
            text-align: center;
            transition: all .5s;
            img{
                width: 200px;
                height: 200px;
            }
            p{
                margin: 0 10px ;
                &:nth-of-type(1){
                    font-size: 16px;
                    color: #000;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
                &:nth-of-type(2){
                    margin-top: 8px;
                    color: #999;
                    font-size: 14px;
                    height: 29px;
                }
                &:nth-of-type(3){
                    color: #cf4444;
                    font-size: 20px;
                }
            }
        }
    }
}

.goods-tabs{
    min-height: 600px;
    background: #fff;
    nav{
        height: 70px;
        line-height: 70px;
        display: flex;
        border-bottom: 1px solid #f5f5f5;
        a{
            padding: 0 40px;
            font-size: 18px;
            position: relative;
            color: #000;
            &:first-child{
                border-right: 1px solid #f5f5f5;
            }
        }
    }
    .goods-detail{
        padding: 40px;
        .attrs{
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 30px;
            li{
                display: flex;
                margin-bottom: 10px;
                width: 50%;
                font-size: 14px;
                dt{
                    width: 100px;
                    color: #999;
                    text-align: left;
                }
                dd{
                    flex: 1;
                    color: #666;
                    text-align: left;
                }
            }
        }
    }
    .goods-comment{
        .head{
            display: flex;
            padding: 30px 0;
            .data{
                width: 340px;
                display: flex;
                padding: 20px;
                p{
                    // flex: 1;
                    width: 150px;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    span{
                        &:first-child{
                            font-size: 32px;
                            color: #cf4444;
                        }
                        &:last-child{
                            color: #999;
                        }
                    }
                }
            }
            .tags{
                flex: 1;
                display: flex;
                border-left: 1px solid #f5f5f5;
                .dt{
                    font-weight: 700;
                    width: 100px;
                    text-align: right;
                    line-height: 42px;
                }
                .dd{
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    a{
                        width: 132px;
                        height: 42px;
                        margin-left: 20px;
                        margin-bottom: 20px;
                        border-radius: 4px;
                        border: 1px solid #e4e4e4;
                        background: #f5f5f5;
                        color: #999;
                        text-align: center;
                        line-height: 40px;
                    }
                }
            }
        }
        .sort{
            height: 60px;
            line-height: 60px;
            border-top: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            margin: 0 20px;
            color: #666;
            text-align: left;
            font-size: 14px;
            span{
                margin-left: 20px;
            }
            a{
                text-decoration: none;
                color: #333;
                outline: none;
                color: #27ba9b;
                margin-left: 30px;
            }
        }
        .list{
            padding: 0 20px;
            .item{
                display: flex;
                padding: 25px 10px;
                border-bottom: 1px solid #f5f5f5;
                .user{
                    width: 160px;
                    img{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    span{
                        padding-left: 10px;
                        color: #666;
                    }
                }
                .body{
                    flex: 1;
                    .score{
                        line-height: 40px;
                        text-align: left;
                        i{
                            color: #ff9240;
                            padding-right: 3px;
                            font-family: "iconfont" !important;
                            font-size: 16px;
                            font-style: normal;
                            -webkit-font-smoothing: antialiased;
                            &::before{
                                content: "\e62b";
                            }
                        }
                        .attr{
                            padding-left: 10px;
                            color: #666;
                            font-size: 14px;
                        }
                    }
                    .text{
                        color: #666;
                        line-height: 24px;
                        text-align: left;
                    }
                    .goods-comment-image{
                        .list{
                            display: flex;
                            flex-wrap: wrap;
                            margin-top: 10px;
                            a{
                                width: 120px;
                                height: 120px;
                                border: 1px solid #e4e4e4;
                                margin-right: 16px;
                                margin-bottom: 10px;
                                img{
                                    width: 100%;
                                    height: 100%;
                                    -o-object-fit: contain;
                                    object-fit: contain;
                                }
                            }
                        }
                    }
                    .time{
                        color: #999;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 5px;
                        font-size: 15px;

                    }
                }
            }
        }
    }
}
</style>